import React, { useEffect, useMemo, useState } from "react";
import CityList from "../../public/cities.json";
import {  SearchBar, Space, Tag,IndexBar, List } from "antd-mobile";
function City() {
  useEffect(() => {
    console.log(CityList);
    return () => {
      cancelCom();
    };
  });
  const cancelCom = () => {
    console.log("取消请求");
  };
  const [filterCity,setFilterCity]=useState(CityList.cityList)
  const getSearch=(value)=>{
    console.log(value)
    filterCitys(value)
  }
  const filterCitys=(searchValue)=>{
     const getData = CityList.cityList.map((itmes)=>{
        const citys=itmes.citys.filter(item=>item.name.includes(searchValue))
        return {...itmes,citys}
     }).filter(items=>items.citys.length>0)
     setFilterCity(getData)
  }

  const memo=useMemo(()=>{
    return filterCity
  },[filterCity])
  return (
    <div 
    style={{
        width:'100%',
        height:'100%',
        background:'#fff',
        zIndex:999
    }}
    >
      <SearchBar placeholder="请输入内容"  onChange={(value)=>getSearch(value)}/>

      <div>
        <Space wrap>
          {CityList.hotCities.map((item, index) => {
            return <Tag color="primary" fill="outline" key={index}>
                {item.name}
              </Tag>
            
          })}
        </Space>
      </div>

      <div style={{height:'100vh'}}> 
         <IndexBar>
        {memo.map((group,i) => {
          
          return (
            <IndexBar.Panel
              index={group.title}
              title={group.title}
              key={i}
            >
              <List>
                {group.citys.map((item, index) => (
                  <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
      </div>
    </div>
  );
}

export default City;
